<template>
  <el-container>
    <el-header>
      <div class="title">
        <h1>商铺信息</h1>
      </div>
    </el-header>
    <el-main>
      <el-form :model="shop" label-width="80px" :rules="rules" ref="shop">
        <el-form-item label="店铺名称" prop="name">
          <el-input v-model="shop.name" style="width: 200px"></el-input>
        </el-form-item>
        <el-form-item label="店铺地址" prop="site">
          <div id="app">
            <el-cascader
              size="large"
              :options="options"
              v-model="selectedOptions"
              @change="handleChange"
            >
            </el-cascader>
          </div>
        </el-form-item>
        <el-form-item label="详细地址" prop="address">
          <el-input v-model="shop.address" style="width: 200px"></el-input>
        </el-form-item>
        <el-form-item label="营业时间" prop="time">
          <el-col :span="11">
            <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="shop.time"
              style="width: 100%"
            ></el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="营业状态" prop="state">
          <el-switch
            v-model="shop.status"
            active-color="#13ce66"
            inactive-color="gray"
            active-text="营业"
            inactive-text="不营业"
            active-value="1"
            inactive-value="0"
          ></el-switch>
        </el-form-item>
        <el-form-item label="店铺照片">
          <el-upload
            class="avatar-uploader"
            action="http://49.235.240.193:8080/admin/upload/image"
            name="image"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onSubmit">确定</el-button>
          <el-button @click="cancal">取消</el-button>
        </el-form-item>
      </el-form>
    </el-main>
  </el-container>
</template>

<script>
import { provinceAndCityData } from "element-china-area-data";
export default {
  data() {
    return {
      rules: {
        name: [{ required: true, message: "请输入门店名称", trigger: "blur" }],
        site: [{ required: true, message: "请选择店铺地址", trigger: "blur" }],
        address: [
          { required: true, message: "请输入门店详细地址", trigger: "blur" },
        ],
        time: [
          {
            type: "date",
            required: true,
            message: "请选择营业时间",
            trigger: "blur",
          },
        ],
        // shop: [{ required: true, message: "请选择门店", trigger: "blur" }],
        state: [{ required: true, message: "请选择门店", trigger: "blur" }],
        // roleId: [{ required: true, message: "请选择职位", trigger: "blur" }],
      },
      shop: {},
      value: "",
      imageUrl: "",
      options: provinceAndCityData,
      selectedOptions: [],
    };
  },
  methods: {
    // 城市
    handleChange(value) {
      console.log(value[0]);
      this.shop.province = value[0];
      this.shop.city = value[1];
    },
    // 取消按钮
    cancal() {
      this.$router.push("/main/shopinfo");
    },
    // 确定按钮
    onSubmit() {
      this.shop.image = this.imageUrl;
      this.shop.time = new Date(this.shop.time).toJSON();
      // this.shop.date = this.shop.date.getTime();
      // console.log( new Date(this.shop.date).toJSON());
      console.log(this.shop);
      this.axios({
        method: "post",
        url: "/store/add",
        data: this.shop,
      }).then((res) => {
        console.log(res);
        this.$router.push("/main/shopinfo");
      });
    },

    // 图片
    handleAvatarSuccess(res, file) {
      this.imageUrl = res.data;
      console.log(this.imageUrl);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
  },
};
</script>

<style lang='less' scopde>
.title {
  background-color: rgb(214, 214, 214);
  height: 50px;
  line-height: 50px;
  font-size: 1.4rem;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>